import React, { Component } from 'react';
import { Card } from 'antd';

import './style.less'

import startImg from '../../images/start_point.png';
import endImg from '../../images/end_point.png';

class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      "position_list": [
        {
          "lon": 116.361221,
          "lat": 40.043776
        }, {
          "lon": 116.363736,
          "lat": 40.038086
        }, {
          "lon": 116.364599,
          "lat": 40.036484
        }, {
          "lon": 116.373438,
          "lat": 40.03538
        }, {
          "lon": 116.377966,
          "lat": 40.036263
        }, {
          "lon": 116.379762,
          "lat": 40.03654
        }, {
          "lon": 116.38084,
          "lat": 40.033225
        }, {
          "lon": 116.38084,
          "lat": 40.029413
        }, {
          "lon": 116.381343,
          "lat": 40.021291
        }, {
          "lon": 116.381846,
          "lat": 40.015821
        }, {
          "lon": 116.382637,
          "lat": 40.008084
        }, {
          "lon": 116.398806,
          "lat": 40.008637
        }
      ],
      "area": [{
        "lon": "116.274737",
        "lat": "40.139759",
        "ts": null
      },
        {
          "lon": "116.316562",
          "lat": "40.144943",
          "ts": null
        },
        {
          "lon": "116.351631",
          "lat": "40.129498",
          "ts": null
        },
        {
          "lon": "116.390582",
          "lat": "40.082481",
          "ts": null
        },
        {
          "lon": "116.38742",
          "lat": "40.01065",
          "ts": null
        },
        {
          "lon": "116.414297",
          "lat": "40.01181",
          "ts": null
        },
        {
          "lon": "116.696242",
          "lat": "39.964035",
          "ts": null
        },
        {
          "lon": "116.494498",
          "lat": "39.851306",
          "ts": null
        },
        {
          "lon": "116.238086",
          "lat": "39.848647",
          "ts": null
        },
        {
          "lon": "116.189454",
          "lat": "39.999418",
          "ts": null
        },
        {
          "lon": "116.244646",
          "lat": "39.990574",
          "ts": null
        },
        {
          "lon": "116.281441",
          "lat": "40.008703",
          "ts": null
        },
        {
          "lon": "116.271092",
          "lat": "40.142201",
          "ts": null
        },
        {
          "lon": "116.271092",
          "lat": "40.142201",
          "ts": null
        }
      ],
    }
  }

  render() {
    return (
      <div>
        <Card className="pinlor-card">
          <div id="orderDetailMap" className="order-map"></div>
          <div className="detail-items">
            <div className="item-title">基础信息</div>
            <ul className="detail-form">
              <li>
                <div className="detail-form-left">用车模式</div>
                <div className="detail-form-content">T80</div>
              </li>
              <li>
                <div className="detail-form-left">车辆编号</div>
                <div className="detail-form-content">8024100002</div>
              </li>
              <li>
                <div className="detail-form-left">用户姓名</div>
                <div className="detail-form-content">高刚</div>
              </li>
              <li>
                <div className="detail-form-left">手机号码</div>
                <div className="detail-form-content">18888888888</div>
              </li>
            </ul>
          </div>
          <div className="detail-items">
            <div className="item-title">行驶轨迹</div>
            <ul className="detail-form">
              <li>
                <div className="detail-form-left">行程起点</div>
                <div className="detail-form-content">北京市昌平区回龙观大街</div>
              </li>
              <li>
                <div className="detail-form-left">行程终点</div>
                <div className="detail-form-content">北京市海淀区奥林匹克公园</div>
              </li>
              <li>
                <div className="detail-form-left">行程里程</div>
                <div className="detail-form-content">10公里</div>
              </li>
            </ul>
          </div>
        </Card>
      </div>
    )
  }

  componentDidMount() {
    this.renderMap();
  }

  renderMap = () => {
    // 添加地图控件
    this.map = new window.BMap.Map('orderDetailMap', { enableMapClick: false });
    this.addMapControl();
    this.drawBikeRoute(this.state['position_list']);
    this.drawServiceArea(this.state.area);
  };

  drawBikeRoute = postionList => {
    // 绘制用户行驶路线
    let startPoint = '';
    let endPoint = '';
    const length = postionList.length;
    if (length > 0) {
      // 添加起点图标
      const arr = postionList[0];
      startPoint = new window.BMap.Point(arr.lon, arr.lat);
      const startIcon = new window.BMap.Icon(startImg, new window.BMap.Size(36, 42), {
        anchor: new window.BMap.Size(36, 42),
        imageSize: new window.BMap.Size(36, 42),
      });

      const startMarker = new window.BMap.Marker(startPoint, { icon: startIcon });
      this.map.addOverlay(startMarker);
      // 添加重点点图标
      const last = postionList[length - 1];
      endPoint = new window.BMap.Point(last.lon, last.lat);
      const endIcon = new window.BMap.Icon(endImg, new window.BMap.Size(36, 42), {
        anchor: new window.BMap.Size(36, 42),
        imageSize: new window.BMap.Size(36, 42),
      });

      const endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });
      this.map.addOverlay(endMarker);
      // 连接路线路
      let trackPoint = [];
      for (let i = 0; i < postionList.length; i++) {
        let point = postionList[i];
        trackPoint.push(new window.BMap.Point(point.lon, point.lat));
      }

      const polyline = new window.BMap.Polyline(trackPoint, {
        strokeColor: '#1869AD',
        strokeWeight: 3,
        strokeOpacity: 1,
      });

      this.map.addOverlay(polyline);
      this.map.centerAndZoom(startPoint, 11);
    }
  };

  drawServiceArea = positionList => {
    /*绘制服务区*/
    let trackPoint = [];
    for (let i = 0; i < positionList.length; i++) {
      let point = positionList[i];
      trackPoint.push(new window.BMap.Point(point.lon, point.lat));
    }
    const polygon = new window.BMap.Polygon(trackPoint, {
      strokeColor: '#CE0000',
      strokeWeight: 4,
      strokeOpacity: 1,
      fillColor: '#ff8605',
      fillOpacity: 0.4
    });
    this.map.addOverlay(polygon);
  };

  addMapControl = () => {
    const map = this.map;
    map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
    map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
  }
}

export default OrderDetail;
